<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
            >确 定</el-button
          >
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="medium"
          label-width="130px"
          label-position="right"
          :disabled="!!isDetail"
          :rules="rules"
        >
          <el-col :span="24">
            <el-form-item label="区域名称" prop="qymc" required>
              <el-input
                v-model="dataForm.qymc"
                placeholder="请输入区域名称"
                clearable
                :style="{ width: '100%' }"
                prefix-icon=""
                suffix-icon=""
              >
                <template slot="prepend"></template>
                <template slot="append"></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属部门" prop="ssbm" required>
              <el-select
                filterable
                v-model="dataForm.ssbm"
                placeholder="请选择所属部门"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in ssbmOptions"
                  :key="index"
                  :label="item.F_FullName"
                  :value="item.F_Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="区域位号" prop="qywh" required>
              <el-input
                v-model="dataForm.qywh"
                placeholder="请输入区域位号"
                clearable
                :style="{ width: '100%' }"
                prefix-icon=""
                suffix-icon=""
              >
                <template slot="prepend"></template>
                <template slot="append"></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="区域等级" prop="qydj" required>
              <el-input
                v-model="dataForm.qydj"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
                prefix-icon=""
                suffix-icon=""
              >
                <template slot="prepend"></template>
                <template slot="append"></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="负责人部门" prop="fzrbm" required>
              <el-select
                filterable
                v-model="dataForm.fzrbm"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                @change="getPerson"
              >
                <el-option
                  v-for="(item, index) in fzrbmOptions"
                  :key="index"
                  :label="item.F_FullName"
                  :value="item.F_Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item ref="fzrInput" label="负责人" prop="fzr" required>
              <el-select
                filterable
                v-model="dataForm.fzr"
                placeholder="请先选择部门"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in fzrOptions"
                  :key="index"
                  :label="item.realName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="负责人工号" prop="fzrgh" required>
              <el-input
                v-model="dataForm.fzrgh"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
                prefix-icon=""
                suffix-icon=""
              >
                <template slot="prepend"></template>
                <template slot="append"></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="负责人电话" prop="fzrlxdh" required>
              <el-input
                v-model="dataForm.fzrlxdh"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
                prefix-icon=""
                suffix-icon=""
              >
                <template slot="prepend"></template>
                <template slot="append"></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="bz">
              <el-input
                v-model="dataForm.bz"
                placeholder="请输入备注"
                show-word-limit
                :style="{ width: '100%' }"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import { departmentPerson } from "@/api/systemIntegration/recard";
export default {
  data() {
    return {
      visible: false,
      isDetail: false,
      dataForm: {
        qymc: undefined,
        ssbm: undefined,
        qywh: undefined,
        qydj: undefined,
        fzr: undefined,
        fzrbm: undefined,
        fzrgh: undefined,
        fzrlxdh: undefined,
        bz: undefined,
      },
      rules: {
        qymc: [
          {
            required: true,
            message: "请输入区域名称",
            trigger: "blur",
          },
        ],
        ssbm: [
          {
            required: true,
            message: "请输入所属部门",
            trigger: "blur",
          },
        ],
        qywh: [
          {
            required: true,
            message: "请输入区域位号",
            trigger: "blur",
          },
        ],
        qydj: [
          {
            required: true,
            message: "请输入区域等级",
            trigger: "blur",
          },
        ],
        fzr: [
          {
            required: true,
            message: "请输入负责人",
            trigger: "blur",
          },
        ],
        fzrbm: [
          {
            required: true,
            message: "请输入负责人部门",
            trigger: "blur",
          },
        ],
        fzrgh: [
          {
            required: true,
            message: "请输入负责人工号",
            trigger: "blur",
          },
        ],
        fzrlxdh: [
          {
            required: true,
            message: "请输入负责人电话",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      ssbmOptions: [],
      fzrOptions: [],
      fzrbmOptions: [],
    };
  },
  created() {
    this.getssbmOptions();
    // this.getfzrOptions();
    this.getfzrbmOptions();
  },
  watch: {
    "dataForm.fzrbm": {
      handler(newVal, oldVal) {
        if (newVal && oldVal != undefined) {
          this.getPerson();
          this.dataForm.fzr = undefined;
          this.$nextTick(() => {
            this.$refs["fzrInput"].clearValidate();
          });
        }
      },
    },
  },
  methods: {
    getssbmOptions() {
      previewDataInterface("772d2cbcadd24df79243e3d92ef5f690").then((res) => {
        this.ssbmOptions = res.data;
      });
    },
    // getfzrOptions() {
    //   previewDataInterface("8bca424f16d6448ab09e57a028853aa9").then((res) => {
    //     this.fzrOptions = res.data;
    //   });
    // },
    getfzrbmOptions() {
      previewDataInterface("772d2cbcadd24df79243e3d92ef5f690").then((res) => {
        this.fzrbmOptions = res.data;
      });
    },
    async getPerson() {
      const { data } = await departmentPerson({
        organizeId: this.dataForm.fzrbm,
      });
      this.fzrOptions = data.list;
    },
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          request({
            url: "/api/System/qyaqscScqqxx/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            this.getPerson();
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (!this.dataForm.id) {
            request({
              url: "/api/System/qyaqscScqqxx",
              method: "post",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          } else {
            request({
              url: "/api/System/qyaqscScqqxx/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          }
        }
      });
    },
  },
};
</script>